<template>
	<!-- 整改反馈 -->
	<view class="page">
	   <scroll-view scroll-y="true" class="scroll"  >
	   <view class="flex-col group">
	   	<view class="flex-col section_1">
	   		<view class="flex-row alin-center">
	   			<text class="text_1">{{infodate.userName}}</text>
	   			<view class="flex-col text-wrapper">
	   				<text class="text_2" v-if="infodate.userRole == 105">巡检员</text>
	   				<text class="text_2" v-else-if="infodate.userRole == 104">工长</text>
	   				<text class="text_2" v-else>业主用户</text>
	   			</view>
	   		</view>
	   		<view class="flex-row  u-m-t-30 imagegrid" style="" v-if="urlpic.length>0">
	   		<template v-for="(item,i) in urlpic">
	   			<view  :key="i"  v-if="checkFile(item,'image')">
	   				<image :src="item" class="image_1" mode="" @click.stop="prviewImage(urlpic,j)"></image>
	   			</view>
	   			<view  v-else  @click="goVideo(item)">
	   				<view class="videoview">
	   					<image class="image_1" :src="item+'?x-oss-process=video/snapshot,t_1000,m_fast'" ></image>
	   					   <image  :src="$IMG_URL+'16557867901398396466.png'" class="play"/>
	   				</view>
	   				
	   				</view>
	   		</template>
	   		
	   			
	   		</view>
	   		<text class="text_3">{{infodate.issueContent}}</text>
	   	</view>
	   	<view class="flex-col section_2">
	   		<view class="flex-col">
	   			<view class="flex-col items-start text-wrapper_1">
	   				<textarea @blur="bindTextAreaBlur" placeholder="请输入回复内容…" v-model="describe" />
	   			</view>
	   			<view class=" group_3">
	   				<shop-upload :maxCount="9" :fileList="fileList" @del="delectPic" @success='success'>
	   				</shop-upload>
	   			</view>
	   		</view>
	   		<view class="flex-col items-center button" @click="gotoper"><text class="text_5">确认</text></view>
	   	</view>
	   </view>
	   </scroll-view>
	
		
		<u-overlay :show="uploadloading" @click="uploadloading = false" class="u-flex u-row-center u-col-center">
			<view>
				<u-loading-icon size="50" :textSize="18" text="请求中" textColor="white" :vertical="true" color="white">
				</u-loading-icon>
			</view>

		</u-overlay>
		<!-- 	<u-popup :show="uploadloading" mode="center" @close="loadingclose">
			<u-loading-icon></u-loading-icon>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				describe: '',
				issueTypeId: '',
				infodate: '',
				inspectionNumId: '',
				urlpic: [],
				urlpics: [
				],
				inspectionFrequencyId: '',
				fileList: [],
				roleId: '',
				uploadloading: false
			};
		},
		onLoad(option) {
			console.log(option)

			this.issueTypeId = option.event;
			if (option.inspectionNumId) {
				this.inspectionNumId = option.inspectionNumId;
				// console.log(this.inspectionNumId,'inspectionNumId')
			}


		},
		computed: {
			...mapGetters(['userInfo'])
		},
		created() {
			this.getinfo();
			uni.startPullDownRefresh();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			// console.log(uni.getStorageSync('ordersId'))
			this.getType()
		},
		methods: {
			goVideo(url) {
				uni.navigateTo({
					url: "/pages/video/video?url=" + url
				})
			},
			checkFile(fileValue,type) {
						    console.log("fileValue==" + fileValue);
						    let index = fileValue.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
						  let   fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀
						    if(type == 'video') {
						        if (!/(.*)\.(mp4|rmvb|avi|ts)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合视频格式
						            return false;
						        }
						    }
							
						    if(type == 'image') {
						        if (!/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合图片格式
						            return false;
						        }
						    }
						 
						    return true;
			},
			loadingclose() {
				this.uploadloading = false
			},
			getType() {
				let inspectionFrequencyId = uni.getStorageSync('inspectionFrequencyId');
				let ordersId = uni.getStorageSync('ordersId');
				this.$http('common.getInfolist', {
					ordersId: ordersId,
					type: '5',
					inspectionFrequencyId: inspectionFrequencyId
				}).then(res => {
					// console.log(res,'获取用户信息')
					if (res.code == 200) {
						console.log(res.data, '获取用户信息');
						this.roleId = res.data.roleId;
					}
				})
			},
			delectPic(index) {
				this.fileList.splice(index, 1);
			},
			success(file) {
				this.fileList.push({
					url: file.url
				})
			},
			Back() {
				let pageNum = 2
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - pageNum];
				uni.navigateBack({
					success: function() {
						// console.log(beforePage)
						if (this.userInfo.roleType == '3' || uni.getStorageSync('userInfo').roleType == '3') {
							beforePage.$vm.$refs.onSiteIndex.getinfo();
						} else if (this.userInfo.roleType == '2' || uni.getStorageSync('userInfo').roleType ==
							'2') {
							beforePage.$vm.$refs.Foreman.getlist();
						}


					}

				})
			},
			getinfo() {
				// 获取信息
				this.$http('foreman.queryComments', {
					issueId: this.issueTypeId
				}).then(res => {
					if (res.code == 200) {
						// console.log(res.data,'res');
						this.infodate = res.data;
						if (this.infodate.issueMedia) {
							this.urlpic = this.infodate.issueMedia.split(',');
							console.log(7889, this.urlpic);
						}

					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
			},
			gotoper() {
				
				if (this.describe == '') {
					uni.showToast({
						title: '请输入回复内容',
						icon: "error"
					})
					return;
				}
				this.uploadloading = true;
				let arr = [];
				this.fileList.map(item => {
					arr.push(item.url)
				})
				let overviewConstructionUrl = arr.join(",");
				this.$http('onsite.replay', {
					issueId: this.infodate.issueId, //问题id
					commentsId: this.infodate.commentsId,
					issueContent: this.describe, //回复内容
					issueMedia: overviewConstructionUrl, //回复图片
					isUserReplyFlag: ''
				}).then(res => {
					if (res.code == 200) {
						this.uploadloading = false;
						if (this.roleId == '105') {
							uni.navigateTo({
								url: '/pages/onSite/onSiteIndex/PatroSerD/patroerexplan?issueId=' + this
									.infodate.issueId
							})
						} else {
							uni.navigateTo({
								url: '/pages/onSite/mine/buildPro/buildPro?inspectionNumId=' + this
									.inspectionNumId
							})
						}

					} else {

					}
				})
			},
			bindTextAreaBlur: function(e) {
				console.log(e.detail.value)
			},
			prviewImage(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	/deep/.text-wrapper_1 uni-textarea {
		border: 1px solid #eee;
		padding-top: 10rpx;
		border-radius: 16rpx;
	}
	.scroll{
		height:calc(100vh - 60px)
	}
.imagegrid{
		    display: grid;
		    grid-template-columns: repeat(3,1fr);
		    gap: 10px;
			justify-items:center;
			align-items:center;
	}
	.page {
		background-color: #f6f7f9;
		width: 100%;
		height: 100vh;
	}

	.back-w {
		height: 110rpx;
	}

	.group {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_1 {
		padding: 30rpx 32rpx;
		
		
	
		background-color: #ffffffff;
		border-top: solid 0.5px #eeeeee;
	}

	.alin-center {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		
	}

	.section_2 {
		margin-top: 20rpx;
		padding: 31rpx 31rpx 48rpx;
		background-color: #ffffffff;
	}
	.videoview{
	  position: relative;
		
		
	}
	.videoview .play {
	  width: 80rpx;
	  height: 80rpx;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	}

	.listConpic {
		width: 214rpx;
		height: 214rpx;
		display: flex;
		// margin: 0rpx 10rpx;
	}

	.image_1 {
		border-radius: 16rpx;
		width: 214rpx;
		height: 214rpx;

	}

	.flex-wra {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		gap: 28rpx;
	}

	.text_3 {
		margin-top: 22rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.button {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
		position: fixed;
		bottom: 60rpx;
		left: 5%;
		width: 90%;
	}

	.text_1 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: bold;
	}

	.text-wrapper {
		margin-left: 15rpx;
		padding: 0 5rpx;
		border-radius: 8rpx;
		border: 1px solid #1d6aff;
		display: flex;
		flex-direction: row;
		height: 32rpx;
	}

	.text-wrapper_1 {
		// padding: 23rpx 0;
		border-radius: 16rpx;
		background-image: url($IMG_URL+'16557870928220192831.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text-wrapper_1 textarea {
		padding-left: 20rpx;
		// margin-left: 3%;
		width: 97%;
		height: 300rpx;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.group_3 {
		padding-top: 31rpx;
		position: relative;
	}

	.text_5 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 80rpx;
	}

	.text_2 {
		color: #1d6aff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.text_4 {
		margin-left: 25rpx;
		color: #bfbfbf;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_3 {
		width: 214rpx;
		height: 214rpx;
	}
</style>
